<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=320,maximum-scale=1,user-scalable=no" />
    <title>Title</title>
    <script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.js"></script>
</head>
<body>
<button id="voice">click</button>
<div style="display:none;" id="wxConf">{{wxConfig}}</div>
<h3 id="p"></h3>
<img src="" alt="" id="image">
<p id="txt"></p>
<button id="share">分享</button>

<script>
    var shareMsg={};
    var elem=document.getElementById('wxConf').innerText
    var wxConf=JSON.parse(elem)
    var jsApiList=[
        "startRecord",
        "stopRecord",
        "onVoiceRecordEnd",
        "translateVoice" , //这个必须加上
        "updateAppMessageShareData",  //分享朋友
        "updateTimelineShareData",  //分享朋友圈
        "previewImage",
        "showAllNonBaseMenuItem",
        "showMenuItems"
    ]
    wx.config({  //在公众号后台jssdk配置授权域名，一定是wx.com主域名！！不带http和www
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，参数仅在pc端时log打印。
        appId: wxConf.appId, // 必填，公众号的唯一标识
        timestamp: wxConf.timestamp, // 必填，生成签名的时间戳
        nonceStr: wxConf.nonceStr, // 必填，生成签名的随机串
        signature: wxConf.signature,// 必填，签名
        jsApiList:jsApiList  // 必填，需要使用的JS接口列表
    });
    wx.error(function(res){ //出错即后台打印错无
        console.log(res)
    });
    wx.ready(function(){  //成功执行里面逻辑，建议所有微信功能逻辑放里面
        wx.checkJsApi({
             // 需要检测的JS接口列表，所有JS接口列表见附录2,
            jsApiList:jsApiList,
            success: function(res) {

            }
        });

        //语音识别获取api
        var voice=true;  //做个开关以免一直执行   开始录音接口
        document.getElementById('voice').onclick=startvideo

        //分享好友api
        $('#share').click(function () {
            // window.alert('点右上角...分享')
            // wx.showAllNonBaseMenuItem()

            wx.showMenuItems({
                menuList: ["menuItem:share:appMessage","menuItem:favorite","menuItem:share:timeline"] // 要显示的菜单项，所有menu项见附录3
            })
        })

        // 预览图片api
        $('#image').click(function (e) {
            var urls=[shareMsg.cover]
            shareMsg.act_s.forEach(function (item) {
                urls.push(item.image)
            })
            wx.previewImage({
                current: shareMsg.cover, // 当前显示图片的http链接
                urls: urls // 需要预览的图片http链接列表
            });
        })

    })

    function startvideo() {
        if(voice){
            wx.startRecord();
            voice=false
        }else{
            wx.stopRecord({
                success: function (res) {
                    console.log(res.localId)
                    var localId=res.localId;
                    wx.translateVoice({  //要使用本地id都要在成功函数里操作，外层取不到id
                        localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {  // 语音识别的结果
                            var result=res.translateResult.replace('。','')
                            document.getElementById('p').innerText=result // 语音识别的结果
                            var url='http://zhouxunwang.cn/data/?id=62&key=VLuT+tNhHNT+jJ6L8ok2R2rAMwTgsJeZ/px07w&q='+result;
                            $.ajax({
                                type: 'GET',
                                url: url,
                                success: function (data, msg) {
                                    var dataObj=JSON.parse(data)
                                    $("#p").text(dataObj.result.title);
                                    $("#txt").text(dataObj.result.desc);
                                    $("#image").attr("src",dataObj.result.cover);
                                    shareMsg=dataObj.result;
                                    //如分享静默失败/没反应，则前面出错或下面某个值中变量有问题，尤其变量/赋值错误
                                    wx.updateAppMessageShareData({  //接口只定义分享内容。要点右上角...才能调出菜单分享
                                        title: dataObj.result.title, // 分享标题
                                        desc: '这是一段很长的描述', // 分享描述
                                        // link分享链接，该链接要与JS安全域名在同一主域名下svipss.top
                                        link: 'http://chat.svipss.top/ab',  //一般是本页地址
                                        imgUrl: dataObj.result.cover, // 分享显示的图标
                                        success: function () {
                                            //vconsole.log(成功定义分享内容，要点右上角...才能调出菜单分享)
                                        }
                                    })
                                }
                            })
                        }
                    });
                    voice=true
                }
            });

        }

    }
</script>
</body>
</html>